<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <el-button-group>
        <el-button type="primary" icon="el-icon-plus" @click="addMenu">添加</el-button>
        <el-button type="primary" icon="el-icon-edit" @click="editMenu">编辑</el-button>
        <el-button type="primary" icon="el-icon-delete">删除</el-button>
      </el-button-group>
    </div>
    <div class="flex-grow" style="display: flex;">
      <div style="width: 40%">
        <el-tree
          ref="menuTree"
          class="filter-tree"
          :data="treeData"
          node-key="id"
          highlight-current
          :props="defaultProps"
          default-expand-all
          @node-click="getNodeData"
        />
      </div>
      <div class="flex-column flex-grow">
        <el-card>
          <el-form ref="form" label-width="80px" :model="menuForm" :inline="true" :rules="menuRules">
            <el-form-item label="名称" prop="name">
              <el-input v-model.trim="menuForm.name" :disabled="!formEdit" placeholder="请输入路径编码" />
            </el-form-item>
            <el-form-item label="路径" prop="path">
              <el-input v-model.trim="menuForm.path" :disabled="!formEdit" placeholder="请输入菜单路径" />
            </el-form-item>
            <el-form-item label="父级节点" prop="pid">
              <el-input v-model.trim="menuForm.pid" :disabled="!formEdit" placeholder="请输入父级节点" />
            </el-form-item>
            <el-form-item label="图标" prop="icon">
              <el-popover
                placement="bottom-start"
                width="450"
                :disabled="!formEdit"
                trigger="click"
                @show="$refs['iconSelect'].reset()"
              >
                <IconSelect ref="iconSelect" @selected="iconSelected" />
                <el-input slot="reference" v-model="menuForm.icon" placeholder="点击选择图标" :disabled="!formEdit" readonly>
                  <svg-icon v-if="menuForm.icon" slot="prefix" :icon-class="menuForm.icon" class="el-input__icon" style="height: 32px;width: 16px;" />
                  <i v-else slot="prefix" class="el-icon-search el-input__icon" />
                </el-input>
              </el-popover>
              <!--<el-input v-model.trim="form.icon" :disabled="!formEdit" placeholder="请输入图标"></el-input>-->
            </el-form-item>
            <el-form-item label="排序" prop="sort">
              <el-input v-model.trim="menuForm.sort" type="number" :disabled="!formEdit" placeholder="请输入排序" />
            </el-form-item>
            <el-form-item label="前端组件" prop="component">
              <el-input v-model.trim="menuForm.component" :disabled="!formEdit" placeholder="请输入组件" />
            </el-form-item>
            <el-form-item label="菜单权限" prop="permission">
              <el-input v-model.trim="menuForm.permission" :disabled="!formEdit" placeholder="请输入权限制" />
            </el-form-item>
            <el-form-item label="隐藏" prop="enable">
              <el-switch v-model="menuForm.enable" class="m-switch" :disabled="!formEdit" />
            </el-form-item>
            <el-form-item v-if="formEdit">
              <el-button type="primary" @click="saveMenu">保存</el-button>
              <el-button @click="formEdit=false">取消</el-button>
            </el-form-item>
          </el-form>
        </el-card>
        <el-card v-if="menuForm.id" class="flex-grow">
          <div slot="header" class="clearfix">
            <span>资源权限</span>
            <el-button style="float: right;" :disabled="!currentPermission" type="danger" @click="showAddPermission">删除</el-button>
            <el-button style="float: right;margin-right: 10px;" :disabled="!currentPermission" type="success" @click="editPermission">编辑</el-button>
            <el-button style="float: right;" type="primary" @click="showAddPermission">新增</el-button>
          </div>
          <div class="flex ">
            <el-button v-for="(item,i) in permissions" plain :type="currentPermission&&currentPermission.id==item.id?'primary':''" @click="currentPermission=item">{{ item.name+'('+item.permission+')' }}</el-button>
          </div>
        </el-card>
      </div>
    </div>
    <el-dialog
      :title="permissionTitle"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <el-form ref="permissionForm" :model="permissionForm" :rules="permissionRules" label-width="80px">
        <el-form-item label="权限名称" prop="name">
          <el-input v-model="permissionForm.name" />
        </el-form-item>
        <el-form-item label="权限编码" prop="permission">
          <el-input v-model="permissionForm.permission" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="savePermission">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
    import { getMenusTree, getDetail, saveMenu } from '@/api/system/agentMenu'
    import IconSelect from '@/components/IconSelect'
    import ElRow from 'element-ui/packages/row/src/row'
    import ElCol from 'element-ui/packages/col/src/col'

    export default {
        name: 'Menu',
        components: {
            ElCol,
            ElRow,
            IconSelect
        },
        data() {
            return {
                treeData: [],
                defaultProps: {
                    children: 'children',
                    label: 'label'
                },
                menuForm: {type:1},
                formEdit: false,
                menuRules: {
                    name: [
                        { required: true, message: '请输入名称', trigger: 'blur' }
                    ],
                    path: [
                        { required: true, message: '请输入权限编码', trigger: 'blur' }
                    ]
                },
                permissionRules: {
                    name: [
                        { required: true, message: '请输入名称', trigger: 'blur' }
                    ],
                    permission: [
                        { required: true, message: '请输入权限编码', trigger: 'blur' }
                    ]
                },
                dialogVisible: false,
                permissionTitle: '',
                permissionForm: {},
                permissions: [],
                currentPermission: undefined
            }
        },
        created() {
            this.initTreeData()
        },
        methods: {
            initTreeData() {
                const _this = this
                getMenusTree().then(res => {
                    console.log(res)
                    _this.treeData = res
                })
            },
            getNodeData(data) {
                const _this = this
                this.formEdit = false
                getDetail(data.id).then(res => {
                    _this.menuForm = res
                    _this.permissions = res.children
                })
            },
            addMenu() {
                this.formEdit = true
                if (this.menuForm.id) {
                    const pid = this.menuForm.id
                    this.menuForm = { pid ,type:1}
                }
            },
            editMenu(){
                this.formEdit = true
            },
            saveMenu() {
                const _this = this
                this.$refs['form'].validate((valid) => {
                    if (valid) {
                        if (!_this.menuForm.pid) {
                            _this.menuForm.pid = 0
                        }
                        _this.saveMenuAction(_this.menuForm, function() {
                            _this.initTreeData()
                            this.formEdit = false
                        })
                    }
                })
            },
            showAddPermission() {
                this.dialogVisible = true
                this.permissionForm = { type:2 }
                this.permissionTitle = '新增资源权限'
            },
            savePermission() {
                const _this = this
                this.$refs['permissionForm'].validate((valid) => {
                    if (valid) {
                        _this.permissionForm.pid = _this.menuForm.id
                        _this.permissionForm.type = 2
                        _this.saveMenuAction(_this.permissionForm, function() {
                            _this.getNodeData(_this.menuForm)
                        })
                    }
                })
            },
            saveMenuAction(menu, callback) {
                const loading = this.$loading({
                    lock: true,
                    text: '请稍后...',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                })
                const _this = this
                saveMenu(menu).then(res => {
                    loading.close()
                    _this.dialogVisible = false
                    _this.currentPermission = undefined
                    _this.$notify({
                        title: '成功',
                        message: '保存成功',
                        type: 'success',
                        duration: 2000
                    })
                    callback()
                }).catch(() => {
                    loading.close()
                })
            },
            editPermission() {
                this.permissionForm = { ...this.currentPermission }
                this.dialogVisible = true
            },
            // 选中图标
            iconSelected(name) {
                const menuForm = this.menuForm
                console.log(this.menuForm)
                menuForm['icon'] = name
                this.menuForm = { ...menuForm }
                console.log(this.menuForm)
            }
        }
    }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  /deep/ .el-input-number .el-input__inner {
    text-align: left;
  }
  .app-container{
    display: flex;
    flex-direction: column;
  }
  .flex{
    display: flex;
    flex-wrap: wrap;
  }
  .flex-column{
    display: flex;
    flex-direction: column;
  }
  .flex-grow{
    flex-grow: 1;
  }
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }
  .m-switch{
    width: 184px;
  }
</style>
